<template>
  <div>
    <el-descriptions class="margin-top" title="个人信息" :column="1" border>
      <!-- 姓名 -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            姓名
          </div>
        </template>
        <h3>{{ this.$store.state.employeeInfo.employee_name }}</h3>
      </el-descriptions-item>

      <!-- staff_id -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone />
            </el-icon>
            staff_id
          </div>
        </template>
        {{ this.$store.state.employeeInfo.staff_id }}
      </el-descriptions-item>

      <!-- 部门 -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            部门
          </div>
        </template>
        老板
      </el-descriptions-item>

      <!-- 职位 -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon><Avatar /></el-icon>
            职位
          </div>
        </template>
        老板
      </el-descriptions-item>
      <!--remarks -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            Remarks
          </div>
        </template>
        <el-tag size="large">Company</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>


<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>